<template>
  <div id="uesrtext">
    <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" @keyup="addMessage"></textarea>
    <el-button type="primary" size="mini" class="send" @click="addMessage" :disabled="this.content.length==0">发送</el-button>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'uesrtext',
  data () {
    return {
      content:''
    }
  },
  computed: mapState([
  	'currentSession'
  ]),
  methods: {
  	addMessage (e) {
      console.log(e);
  		if ((e.ctrlKey && e.keyCode ===13 && this.content.length) || (e.target._prevClass == 'el-button send el-button--primary el-button--mini' && this.content.length)) {
        // 发送方存储聊天记录
        let msgObj = new Object();
        msgObj.to = this.currentSession.username;
        msgObj.content = this.content;
        this.$store.state.stomp.send('/wsyeb/chat', {}, JSON.stringify(msgObj))
  			this.$store.commit('addMessage',msgObj);
  			this.content='';
  		}
  	}
  }
}
</script>

<style lang="scss" scoped>
#uesrtext {
	position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30%;
  border-top: solid 1px #DDD;
  > textarea {
  	padding: 10px;
  	width: 100%;
  	height: 100%;
  	border: none;
  	outline: none;
  }
  .send {
    position: absolute;
    border-radius: 10px;
    bottom: 5px;
    right: 5px;
  }
}
</style>
